<template>
  <div id="menuNav" v-show="meunIsShow">
    <!-- 动态菜单 -->
    <el-menu
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="width: 100%"
      router
      unique-opened
      :collapse="isCollapse"
    >
      <!-- 循环根节点 -->
      <el-submenu
        v-for="(item, index) in navJson"
        v-bind:key="index"
        :index="item.path"
      >
        <!-- 根节点名称 -->
        <template slot="title">
          <i class="titleIcon" :class="item.icon"></i>
          <span> {{ item.name }}</span>
        </template>
        <!-- 循环一级菜单 -->
        <div v-for="(one, o_index) in item.children" v-bind:key="o_index">
          <!-- 没有二级菜单 -->
          <el-menu-item v-show="!one.children" :index="one.path">
            <i class="titleIcon" :class="one.icon"></i>
            <span>{{ one.name }}</span>
          </el-menu-item>
          <!-- 有二级菜单 -->
          <el-submenu v-show="one.children" :index="one.path">
            <template slot="title">
              <i class="titleIcon" :class="one.icon"></i>
              <span>{{ one.name }}</span>
            </template>
            <!-- 循环二级菜单-->
            <div v-for="(two, t_index) in one.children" v-bind:key="t_index">
              <!-- 没有三级菜单 -->
              <el-menu-item v-show="!two.children" :index="two.path">
                <i class="titleIcon" :class="two.icon"></i>
                <span>{{ two.name }}</span>
              </el-menu-item>
            </div>
          </el-submenu>
        </div>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
// 引入监听宽度的组件
import elementResizeDetectorMaker from "element-resize-detector";
// import em from "Vue";
export default {
  data() {
    return {
      isCollapse: false,
      // 循环的JSON数据
      navJson: [
        {
          name: "个人中心",
          icon: "el-icon-monitor",
          path: "1",
          children: [
            {
              name: "我的首页",
              icon: "el-icon-star-off",
              path: "/personal/home",
            },
            {
              name: "商品列表",
              icon: "el-icon-tickets",
              path: "/personal/productList",
            },
            {
              name: "图片上传",
              icon: "el-icon-paperclip",
              path: "/personal/about",
            },
            {
              name: "音乐列表",
              icon: "el-icon-service",
              path: "/personal/music",
            },
            {
              name: "我的基金",
              icon: "el-icon-tableware",
              path: "/personal/fund",
            },            
            {
              name: "个人博客",
              icon: "el-icon-document",
              path: "/personal/userblog",
            },
          ],
        },
        {
          name: "系统管理",
          icon: "el-icon-s-tools",
          path: "2",
          children: [
            {
              name: "菜单管理",
              icon: "el-icon-coordinate",
              path: "/system/menusettings",
            },
            {
              name: "用户管理",
              icon: "el-icon-user",
              path: "/system/usersettings",
            },
            {
              name: "消息管理",
              icon: "el-icon-chat-line-round",
              path: "2-3",
              children: [
                {
                  name: "消息模板",
                  icon: "el-icon-files",
                  path: "/system/message/message_tem",
                },
                {
                  name: "消息列表",
                  icon: "el-icon-notebook-1",
                  path: "/system/message/message_lis",
                },
              ],
            },
          ],
        },
      ],
      // 默认选择的菜单
      defaultActive: "/personal/home",
      // 菜单是否显示
      meunIsShow: true,
    };
  },
  watch: {
    $route: "watchrouter",
  },
  mounted() {
    this.watchrouter();
    // 如果有cooie存在从缓存中读取，没有自动存一份
    if (this.cookie.getCookie("navJson")) {
      this.navJson = JSON.parse(this.cookie.getCookie("navJson"));
    } else {
      // 封装数据到cookie
      let navCookieJson = {
        navJson: JSON.stringify(this.navJson),
      };
      // 调用setCookie方法，同时传递需要存储的json数据，保存天数
      this.cookie.setCookie(navCookieJson, 7);
    }
    // 实时监听左侧菜单的宽度，小于135时变成收缩的样子
    const _this = this;
    const erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById("menuNav"), (element) => {
      _this.$nextTick(() => {
        // 拿到左侧元素
        let leftDivWidth = element.offsetWidth;
        leftDivWidth < 135
          ? (_this.isCollapse = true)
          : (_this.isCollapse = false);
      });
    });
  },
  methods: {
    watchrouter() {
      this.defaultActive = this.$router.currentRoute.fullPath;
    },
    changeCollapse(status) {
      console.log(status);
      this.meunIsShow = status;
      this.$forceUpdate();
    },
  },
};
</script>



<style>
.titleIcon {
  color: #fff !important;
  margin-right: 5px;
}
</style>
